<template>
  <avue-draggable
    :width="widget.location.width"
    :height="widget.location.height"
    :top="widget.location.top"
    :left="widget.location.left"
    :index="index"
    ref="draggable"
    @focus="handleFocus"
    @blur="handleBlur"
  >
    <component :is="widget.entity" :widget="widget"></component>
  </avue-draggable>
</template>

<script>
import ChartBar from "./ChartBar.vue";
import ChartLine from "./ChartLine.vue";
import ChartPie from "./ChartPie.vue";
import ChartScatter from "./ChartScatter.vue";
import ChartPictorial from "./ChartPictorial.vue";
import ChartRadar from "./ChartRadar.vue";
import ChartFunnel from "./ChartFunnel.vue";
import ChartGauge from "./ChartGauge.vue";
import ChartMap from "./ChartMap.vue";
import OthersText from "./OthersText.vue";
import OthersMarquee from "./OthersMarquee.vue";
import OthersImage from "./OthersImage.vue";
import OthersTable from "./OthersTable.vue";
import OthersTime from "./OthersTime.vue";
export default {
  props: {
    index: Number,
    widget: {
      type: [Object],
      default: () => {},
    },
  },
  data() {
    return {};
  },
  computed: {
    activated() {
      return this.widget.active;
    },
  },
  watch: {
    activated: {
      handler(val) {
        this.$refs.draggable.setActive(val);
      },
      deep: true,
    },
  },
  mounted() {
    if (this.activated) {
      this.$refs.draggable.setActive(true);
    }
  },
  methods: {
    handleFocus() {
      this.$emit("refreshWidgetActive", this.widget.id);
    },
    handleBlur({ index, left, top, width, height }) {
      this.index = index;
      this.widget.location.left = left;
      this.widget.location.top = top;
      this.widget.location.width = width;
      this.widget.location.height = height;
    },
  },
  components: {
    ChartBar,
    ChartLine,
    ChartPie,
    ChartScatter,
    ChartPictorial,
    ChartRadar,
    ChartFunnel,
    ChartGauge,
    ChartMap,
    OthersText,
    OthersMarquee,
    OthersImage,
    OthersTable,
    OthersTime,
  },
};
</script>

<style lang="stylus">
.avue-draggable {
  padding: 0;
}

.avue-draggable--active {
  .avue-draggable__mask {
    border: 1px dashed #09f;
    background-color: rgba(115, 170, 229, 0.5);
  }
}
</style>
    